<template>
	<om-page :title="pageTitle">
		<view class="desc-chart om-btn-color">
			<view class="allchart"><a @click="periodHandle">查询</a></view>
		</view>
		<view class="cu-bar bg-white" style="margin-top: 51px;">
			<view class="action" style="font-size: 16px; margin-left: 0;">
				<text class="title-Icon"><span></span></text>
				<text class="margin-left"><span>基本信息</span></text>
			</view>
		</view>
		<uni-list>
			<uni-list-item :showArrow="false">
				 <view slot="header" >
					<view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">姓名</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;">{{ zUserName }}</view>
					</view>
					<view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">计酬岗位</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;">{{ posName }}</view>
					</view>
					<view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">机构名称</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;">{{ instName }}</view>
					</view>
					<!-- <view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">期间类别</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;">{{ periodName }}</view>
					</view> -->
					<view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">年度</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;">{{ year }}</view>
					</view>
					<!-- <view class="tui-flex align-center om-font-size" v-show="periodCode =='38550'">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">季度</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;">{{ quarter }}</view>
					</view>
					<view class="tui-flex align-center om-font-size" v-show="periodCode =='38549'">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">月度</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;">{{ month }}</view>
					</view> -->
					<view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">起始日期</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;">{{ startDate }}</view>
					</view>
					<view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">截止日期</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;">{{ endDate }}</view>
					</view>
				 </view>
			</uni-list-item>
		</uni-list>
		<view class="cu-bar bg-white">
			<view class="action" style="font-size: 16px; margin-left: 0;">
				<text class="title-Icon"><span></span></text>
				<text class="margin-left"><span>使命愿景价值观</span></text>
			</view>
		</view>
		<uni-list>
			<uni-list-item :showArrow="false">
				 <view slot="header" >
					<view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">使命</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;border-bottom: 1px dashed #c8c7cc;">{{ mission }}</view>
						<p>{{'\xa0'}}</p>
						<image src="@/static/images/others/look.png" class="look" v-show="mission" @click.stop="detailModal(1)"></image>
					</view>
					<view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">愿景</view>
						 <p>{{'\xa0'}}</p>
						 <view class="" style="width:350rpx;border-bottom: 1px dashed #c8c7cc;">{{ vision }}</view>
						<p>{{'\xa0'}}</p>
						<image src="@/static/images/others/look.png" class="look" v-show="vision" @click.stop="detailModal(2)"></image>
					</view>
					<view class="tui-flex align-center om-font-size">
						 <view class="tui-right show-label" style="font-size: 16px; width:250rpx;">价值观</view>
						 <p>{{'\xa0'}}</p> 
						 <view>
							 <view class="tui-flex align-center om-font-size" v-for="item in valuesList">
								 <view style="width:350rpx;">{{ item.cultureContent }}</view>
								 <p>{{'\xa0'}}</p>
								 <image src="@/static/images/others/look.png" class="look" v-show="item.cultureContent" @click.stop="detailModal(3,item)"></image>
							 </view>
						 </view>
					</view>
				 </view>
			</uni-list-item>
		</uni-list>
		<view class="cu-bar bg-white">
			<view class="action" style="font-size: 16px; margin-left: 0;">
				<text class="title-Icon"><span></span></text>
				<text class="margin-left"><span>公司年度目标</span></text>
			</view>
		</view>
		<view class="tui-flex">
			<view class="tui-col-1"></view>
			<view class="tui-col-11">
				<view class="remarkTable" style="white-space: pre-wrap; word-wrap: break-word;">
					<view v-for="(item, index) in companyTargetList" :key="index">{{ (index+1)+'、'+item.targetRemark }}</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white">
			<view class="action" style="font-size: 16px; margin-left: 0;">
				<text class="title-Icon"><span></span></text>
				<text class="margin-left"><span>部门年度目标</span></text>
			</view>
		</view>
		<view class="tui-flex">
			<view class="tui-col-1"></view>
			<view class="tui-col-11">
				<view class="remarkTable" style="white-space: pre-wrap; word-wrap: break-word;">
					<view v-for="(item, index) in instTargetList" :key="index">{{ (index+1)+'、'+item.targetRemark }}</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white">
			<view class="action" style="font-size: 16px; margin-left: 0;">
				<text class="title-Icon"><span></span></text>
				<text class="margin-left"><span>个人年度目标</span></text>
			</view>
		</view>
		<view class="tui-flex">
			<view class="tui-col-1"></view>
			<view class="tui-col-11">
				<view class="remarkTable" style="white-space: pre-wrap; word-wrap: break-word;">
					<view v-for="(item, index) in personalTargetList" :key="index">{{ (index+1)+'、'+item.targetRemark }}</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white">
			<view class="action" style="font-size: 16px; margin-left: 0;">
				<text class="title-Icon"><span></span></text>
				<text class="margin-left"><span>绩效指标</span></text>
			</view>
		</view>
		<view class="indexshow">
			<view v-for="(item, index) in showIndexList" :key="index">
				<view class="swiper-item">{{ item.indexPlanCode ? (item.indexPlanCode+':'+item.indexDictName) : item.indexDictName }}</view>
				<view class="chart">
					<om-ucharts :chartType="showPieChartList[index].type" :opts="showPieChartList[index]" :canvasId="'canvas'+showPieChartList[index].id"></om-ucharts>
				</view>
			</view>
		</view>
		<uni-popup id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="popup-item padding">
					<text class="popup-text">机构名称</text>
					<input class="popup-input" type="text" disabled="true" v-model="searchInstName" @click="showInstTree" />
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view class="popup-item padding">
					<text class="popup-text">姓名</text>
					<input class="popup-input" type="text" disabled="true" v-model="searchUserName" @click="showUserNameHandle" />
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<!-- <view class="popup-item padding">
					<text class="popup-text">期间类别</text>
					<picker @change="periodChange" mode="selector" :range="periodCodeList" range-key="dicname" :value="periodIndex">
						<view class="popup-select">{{ periodCodeList.length >0 ? periodCodeList[periodIndex].dicname : '请选择'}}</view>
					</picker>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view> -->
				<view class="popup-item padding">
					<text class="popup-text">年度</text>
					<picker @change="yearChange" mode="selector" :range="yearList" range-key="value" :value="yearIndex">
						<view class="popup-select">{{ yearList.length >0 ? yearList[yearIndex].value : '请选择'}}</view>
					</picker>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<!-- <view class="popup-item padding" v-show="searchPeriodCode =='38550'">
					<text class="popup-text">季度</text>
					<picker @change="quarterChange" mode="selector" :range="quarterList" range-key="dicname" :value="quarterIndex">
						<view class="popup-select">{{ quarterList.length >0 ? quarterList[quarterIndex].dicname : '请选择'}}</view>
					</picker>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view class="popup-item padding" v-show="searchPeriodCode =='38549'">
					<text class="popup-text">月度</text>
					<picker @change="monthChange" mode="selector" :range="monthList" range-key="sort" :value="monthIndex">
						<view class="popup-select">{{ monthList.length >0 ? monthList[monthIndex].sort : '请选择'}}</view>
					</picker>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view> -->
				<view class="popup-item padding">
					<text class="popup-text">开始日期</text>
					<input class="popup-input" type="text" disabled="true" v-model="searchStartDate" />
				</view>
				<view class="popup-item padding">
					<text class="popup-text">截止日期</text>
					<input class="popup-input" type="text" disabled="true" v-model="searchEndDate" />
				</view>
				<view class="margin flex justify-end">
					<a class="cancel-btn" @click="save">确定</a>
					<a class="cancel-btn" @click="cancel">取消</a>
				</view>
			</view>
		</uni-popup>
		<view class="showUserPopup" v-show="showUserName">
			<view class="bar">
				<view class="back" @click="backHandle">返回</view>
			</view>
			<view class="om_hd_fix">
					<uni-search-bar 
					bgColorCls="bg-steelblue" 
					cancelColor="text-white"
					placeholder="请输入关键字查询" 
					:focus="true" 
					@confirm="confirmKey">
				 </uni-search-bar>
			</view>
			<uni-list style="height: 100%; overflow: auto; padding-top: 50px;">
				<view v-for="(item, index) in searchList" :key="index">
					<uni-list-item
						showArrow
						:title="item.username"
						@click="infoTab(item, index)"
					></uni-list-item>
				</view>
			</uni-list>
		</view>
		<view class="showUserPopup" v-show="showInstName">
			<ot-tree-dshow :defaultLevel="true" :selectParent="true" :showCancel="true" :showConfirm="true" ref="ottree" :range="instList" rangeKey="text" @cancel="instCancel" @confirm="instConfirm"></ot-tree-dshow>
		</view>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import {
		ignoreHtml,
	} from '@/static/js/common.js';
	import {mapState} from 'pinia';
	import { useLoginUserStore } from '@/stores/login-user.js';
	export default {
		data() {
			return {
				pageTitle:"管理驾驶舱",
				periodCode: '38551',
				periodName: '年度',
				year: '',
				quarterCode: '',
				quarter: '',
				month: '',
				monthCode: '',
				startDate: '',
				endDate: '',
				mission:'',
				vision: '',
				valuesList: [],
				missionDetail: '',
				visionDetail: '',
				companyTargetList: [],
				instTargetList: [],
				personalTargetList: [],
				selectNum: 0,
				indexList:[],
				pieChartList: [],
				pieChart: {},
				zmonthArray: [],
				periodCodeList: [],
				yearList: [],
				quarterList: [],
				monthList: [],
				periodIndex: 0,
				yearIndex: 0,
				quarterIndex: 0,
				monthIndex: 0,
				searchPeriodCode: '38551',
				searchPeriodName: '年度',
				searchYear: '',
				searchQuarterCode: '33057',
				searchQuarter: 1,
				searchMonth: 1,
				searchMonthCode: '35804',
				searchStartDate: '',
				searchEndDate: '',
				showIndexList:[],
				showPieChartList: [],
				scrollTop: 0,
				showIndexListTotalNum: 0,
				showIndexListNowNum: 1,
				instList:[],
				instId: '',
				instName: '',
				searchInstId: '',
				searchInstName: '',
				searchList: [],
				keyword: '',
				zUserId: '',
				zUserName: '',
				searchUserId: '',
				searchUserName: '',
				posId: '',
				posName: '',
				searchPosId: '',
				searchPosName: '',
				showUserName: false,
				showInstName: false,
			};
		},
		computed: {
			...mapState(useLoginUserStore, ['userId', 'userName', 'salaryPosId', 'salaryPosName', 'salaryInstId', 'salaryInstName'])
		},
		methods: {
			calcBgColor(item) {
				return this.ColorList[3].name
			},
			detailModal(num, desc){
				let _that = this;
				if(num == 1){
					uni.showModal({
						title: '使命',
						content: ignoreHtml(_that.missionDetail),
						showCancel: false,
						success(res){
							
						}
					})
				}
				if(num == 2){
					uni.showModal({
						title: '愿景',
						content: ignoreHtml(_that.visionDetail),
						showCancel: false,
						success(res){
							
						}
					})
				}
				if(num == 3){
					uni.showModal({
						title: '价值观：'+desc.cultureContent,
						content: ignoreHtml(desc.cultureExplain),
						showCancel: false,
						success(res){
							
						}
					})
				}
			},
			getPeriodDate(num){
				let _that = this;
				_that.om.request('toperationAnalysisReport/getSEDay',{
					periodCode: _that.searchPeriodCode,
					year: _that.searchYear,
					quarterCode: '',//_that.searchQuarterCode,
					month: ''//_that.searchMonth
				},'post').then(res => {
					if(res.succeed){
						if(num == 1){
							_that.startDate = res.value.startDay
							_that.endDate = res.value.endDay
							_that.searchStartDate = res.value.startDay
							_that.searchEndDate = res.value.endDay
						}else{
							_that.searchStartDate = res.value.startDay
							_that.searchEndDate = res.value.endDay
						}
					}
				})
			},
			getCompanyTargetList(){
				let _that = this;
				_that.om.request('targetList/getTreeGrid',{
					year: _that.year,
					busCode: 'OBJ0232',
					page: 1,
					rows: 9999,
				}).then(res => {
					_that.companyTargetList = res.rows
				})
			},
			getInstTargetList(){
				let _that = this;
				_that.om.request('targetList/getTreeGrid',{
					year: _that.year,
					instIds: _that.instId,
					page: 1,
					rows: 9999,
				}).then(res => {
					_that.instTargetList = res.rows
				})
			},
			getPersonalTargetList(){
				let _that = this;
				_that.om.request('targetList/getTreeGrid',{
					year: _that.year,
					userIds: _that.zUserId,
					page: 1,
					rows: 9999,
				}).then(res => {
					_that.personalTargetList = res.rows
				})
			},
			getPeriodObjListByCurrentYear(){
				let _that = this;
				_that.om.request('statisticalSummaryShow/getPeriodObjListByCurrentYear',{
					year: _that.year,
				},'post').then(res => {
					if(res.succeed){
						if(this.periodCode != '38550'){
							_that.zdataMonth = []
							_that.zmonthArray = [];
							if(res.value[0].startDay.substring(5,7) == '01'){
							                                for(var i=0; i<res.value.length; i++){
																_that.zmonthArray.push(res.value[i].reportMonth)
							                                    var sday = res.value[i].startDay.substring(5,7);
							                                    _that.zdataMonth.push(sday)
							                                }
							                            }else{
							                                var cyear = res.value[0].startDay.substring(0,4);
							                                var cnum = false;
							                                for(var i=0; i<res.value.length; i++){
																_that.zmonthArray.push(res.value[i].reportMonth)
							                                    if(i>0){
							                                        if(!cnum && cyear != res.value[i].startDay.substring(0,4)){
							                                            _that.zdataMonth.push(res.value[i].startDay.substring(0,4)+res.value[i].startDay.substring(5,7))
							                                            cnum = true;
							                                        }else{
							                                            _that.zdataMonth.push(res.value[i].startDay.substring(5,7))
							                                        }
							                                    }else{
							                                        _that.zdataMonth.push(res.value[i].startDay.substring(0,4)+res.value[i].startDay.substring(5,7))
							                                    }
							                                }
							                            }
						}
					}
				})
			},
			getDataList(){
				let _that = this;
				// let smonth =  _that.monthCode;
				// let squarter = _that.quarterCode;
				// if(_that.periodCode == '38549'){
				// 	squarter = '';
				// }else if(_that.periodCode == '38550'){
				// 	smonth = '';
				// }else{
				// 	squarter = '';
				// 	smonth = '';
				// }
				uni.showLoading({
					title:'请稍后.....'
				})
				_that.om.request('statisticalSummaryShow/getSummaryDataByCurrentYear',{
					periodCode: _that.periodCode,
					year: _that.year,
					quarterCodeStrs: '',
					monthCodeStrs: '',
					postIdStr: _that.posId,
					userIdStr: _that.zUserId,
					ignoreIndexCategroyFlag:true,
					relatedRoleCode: _that.zUserId ? '39013' : ''
				},'post').then(res => {
					if(res.succeed){
						if(res.value.length == 0){
						    _that.indexList = []
						}else{
						                        var zarr = [];
						                        var data = _.groupBy(res.value, 'indexDictId');
						                        data = Object.values(data)
						                        for(var i=0; i<data.length; i++){
						                            if(data[i].length>1){
						                                data[i] =  Object.values(_.groupBy(data[i], 'indexCategoryName'))
						                                for(var r=0; r<data[i].length; r++){
						                                    if(data[i][r].length>1){
						                                        data[i][r] =  Object.values(_.groupBy(data[i][r], 'userId'))
						                                        for(var m=0; m<data[i][r].length; m++){
						                                            if(data[i][r][m].length>1){
						                                                data[i][r][m] =  Object.values(_.groupBy(data[i][r][m], 'postId'))
						                                                for(var n=0; n<data[i][r][m].length; n++){
						                                                    zarr.push(data[i][r][m][n])
						                                                }
						                                            }else{
						                                                zarr.push(data[i][r][m])
						                                            }
						                                        }
						                                    }else{
						                                        zarr.push(data[i][r])
						                                    }
						                                }
						                            }else{
						                                zarr.push(data[i])
						                            }
						                        }
						                        var szarr = [];
						                        for(var i=0; i<zarr.length; i++){
						                            for(var r=0; r<zarr[i].length; r++){
						                                if(zarr[i][r].year == _that.year){
						                                    szarr.push(zarr[i])
						                                }
						                            }
						                        }
						                        if(szarr.length == 0){
						                            _that.indexList = []
						                        }else{
						                            var showarr = [];
						                            for(var i=0; i<szarr.length; i++){
						                                var obj = {
						                                    indexDictId: szarr[i][0].indexDictId,
						                                    indexDictName: szarr[i][0].indexDictName,
						                                    indexCategoryName: szarr[i][0].indexCategoryName,
						                                    indexPlanCode: szarr[i][0].yearIndexPlanCode,
						                                    indexPlanId: szarr[i][0].yearIndexPlanId,
						                                    data: [{},{},{},{}],
															num: i,
						                                }
						                                if(szarr[i].length == 1){
						                                    var darr = _that.zdataAdd(szarr[i][0],szarr[i][0].year,_that.year)
						                                    if(szarr[i][0].year == _that.year){
						                                        obj.data.splice(3,1,darr[0])
						                                        obj.data.splice(2,1,darr[1])
						                                        var sdarr1 = _that.zdataAdd([],(szarr[i][0].year-1),_that.year)
						                                        var sdarr2 = _that.zdataAdd([],(szarr[i][0].year-2),_that.year)
						                                        obj.data.splice(1,1,sdarr1[0])
						                                        obj.data.splice(0,1,sdarr2[0])
						                                    }else if((szarr[i][0].year+1) == _that.year){
						                                        obj.data.splice(1,1,darr[0])
						                                        var sdarr1 = _that.zdataAdd([],(szarr[i][0].year+1),_that.year)
						                                        var sdarr2 = _that.zdataAdd([],(szarr[i][0].year-1),_that.year)
						                                        obj.data.splice(3,1,sdarr1[0])
						                                        obj.data.splice(2,1,sdarr1[1])
						                                        obj.data.splice(0,1,sdarr2[0])
						                                    }else{
						                                        obj.data.splice(0,1,darr[0])
						                                        var sdarr1 = _that.zdataAdd([],(szarr[i][0].year+2),_that.year)
						                                        var sdarr2 = _that.zdataAdd([],(szarr[i][0].year+1),_that.year)
						                                        obj.data.splice(3,1,sdarr1[0])
						                                        obj.data.splice(2,1,sdarr1[1])
						                                        obj.data.splice(1,1,sdarr2[0])
						                                    }
						                                }else if(szarr[i].length == 2){
						                                    var yeararr = [];
						                                    var zyeararr = [(parseInt(_that.year)-2),(parseInt(_that.year)-1),parseInt(_that.year)];
						                                    for(var r=0; r<szarr[i].length; r++){
						                                        yeararr.push(szarr[i][r].year)
						                                        var darr = _that.zdataAdd(szarr[i][r],szarr[i][r].year,_that.year)
						                                        if(szarr[i][r].year == _that.year){
						                                            obj.data.splice(3,1,darr[0])
						                                            obj.data.splice(2,1,darr[1])
						                                        }else if((szarr[i][r].year+1) == _that.year){
						                                            obj.data.splice(1,1,darr[0])
						                                        }else{
						                                            obj.data.splice(0,1,darr[0])
						                                        }
						                                    }
						                                    var dyear = _.difference(zyeararr, yeararr);
						                                    if(dyear[0] == _that.year){
						                                        var darr = _that.zdataAdd([],dyear[0],_that.year)
						                                        obj.data.splice(3,1,darr[0])
						                                        obj.data.splice(2,1,darr[1])
						                                    }else if((dyear[0]+1) == _that.year){
						                                        var darr = _that.zdataAdd([],dyear[0],_that.year)
						                                        obj.data.splice(1,1,darr[0])
						                                    }else{
						                                        var darr = _that.zdataAdd([],dyear[0],_that.year)
						                                        obj.data.splice(0,1,darr[0])
						                                    }
						                                }else{
						                                    for(var r=0; r<szarr[i].length; r++){
						                                        var darr = _that.zdataAdd(szarr[i][r],szarr[i][r].year,_that.year)
						                                        if(szarr[i][r].year == _that.year){
						                                            obj.data.splice(3,1,darr[0])
						                                            obj.data.splice(2,1,darr[1])
						                                        }else if((szarr[i][r].year+1) == _that.year){
						                                            obj.data.splice(1,1,darr[0])
						                                        }else{
						                                            obj.data.splice(0,1,darr[0])
						                                        }
						                                    }
						                                }
						                                showarr.push(obj)
						                            }

													_that.indexList = showarr;
													
													_that.pieChartList = []
													for(let i=0;i<showarr.length;i++){
														let chartObj = {
															id: showarr[i].num,
															type: 'line',
															series: [],
															categories: [],
														}
														for(let r=0;r<showarr[i].data.length;r++){
															if(_that.periodCode == '38550'){
																chartObj.categories = [1,2,3,4]
																let obj={
																	name: showarr[i].data[r].ztype,
																	data: [showarr[i].data[r].zquarterlySum1 ? showarr[i].data[r].zquarterlySum1 : null,
																	showarr[i].data[r].zquarterlySum2 ? showarr[i].data[r].zquarterlySum2 : null,
																	showarr[i].data[r].zquarterlySum3 ? showarr[i].data[r].zquarterlySum3 : null,
																	showarr[i].data[r].zquarterlySum4 ? showarr[i].data[r].zquarterlySum4 : null]
																}
																chartObj.series.push(obj)
															}else{
																chartObj.categories = _that.zdataMonth
																let obj={
																	name: showarr[i].data[r].ztype,
																	data: [showarr[i].data[r].zmonth1 ? showarr[i].data[r].zmonth1 : null,showarr[i].data[r].zmonth2 ? showarr[i].data[r].zmonth2 : null,
																	showarr[i].data[r].zmonth3 ? showarr[i].data[r].zmonth3 : null,showarr[i].data[r].zmonth4 ? showarr[i].data[r].zmonth4 : null,
																	showarr[i].data[r].zmonth5 ? showarr[i].data[r].zmonth5 : null,showarr[i].data[r].zmonth6 ? showarr[i].data[r].zmonth6 : null,
																	showarr[i].data[r].zmonth7 ? showarr[i].data[r].zmonth7 : null,showarr[i].data[r].zmonth8 ? showarr[i].data[r].zmonth8 : null,
																	showarr[i].data[r].zmonth9 ? showarr[i].data[r].zmonth9 : null,showarr[i].data[r].zmonth10 ? showarr[i].data[r].zmonth10 : null,
																	showarr[i].data[r].zmonth11 ? showarr[i].data[r].zmonth11 : null,showarr[i].data[r].zmonth12 ? showarr[i].data[r].zmonth12 : null]
																}
																chartObj.series.push(obj)
															}
														}
														_that.pieChartList.push(chartObj)
													}
													
													_that.showIndexList = _that.indexList.slice(0, 10)
													_that.showPieChartList = _that.pieChartList.slice(0, 10)
													_that.showIndexListTotalNum = Math.ceil(_that.indexList.length/10)
													_that.showIndexListNowNum = 1
												}
											}
					}
					uni.hideLoading()
				})
			},
			getChart(item){
				let _that = this;
				_that.selectNum = item.num
			},
			group(array, subGroupLength) {
			    let index = 0;
			    let newArray = [];
			    while(index < array.length) {
			        newArray.push(array.slice(index, index += subGroupLength));
			    }
			    return newArray;
			},
			zdataAdd(data,year,nyear) {
				let _that = this;
			        var arr = [];
			        var isdata = Object.keys(data).length == 0 ? false : true;
			        var obj1 = {},obj2 = {};
			        if(year == nyear){
			            obj1.ztype = '本年执行数';
			            obj2.ztype = '本年目标值';
			            obj2.zid = isdata ? data.id : '';
			            obj2.zsum = isdata ? data.yearPlanNum : '';
			            obj2.zquarterlysum = isdata ? data.yearSum : '';
			            if(this.periodCode == '38550'){
			                obj2.zquarterlySum1 = isdata ? data.quarterlySum1 : '';
			                obj2.zquarterlySum2 = isdata ? data.quarterlySum2 : '';
			                obj2.zquarterlySum3 = isdata ? data.quarterlySum3 : '';
			                obj2.zquarterlySum4 = isdata ? data.quarterlySum4 : '';
			            }else{
			                obj2.zmonth1 = isdata ? data['monthPlanNum'+_that.zmonthArray[0]] : '';
			                obj2.zmonth2 = isdata ? data['monthPlanNum'+_that.zmonthArray[1]] : '';
			                obj2.zmonth3 = isdata ? data['monthPlanNum'+_that.zmonthArray[2]] : '';
			                obj2.zmonth4 = isdata ? data['monthPlanNum'+_that.zmonthArray[3]] : '';
			                obj2.zmonth5 = isdata ? data['monthPlanNum'+_that.zmonthArray[4]] : '';
			                obj2.zmonth6 = isdata ? data['monthPlanNum'+_that.zmonthArray[5]] : '';
			                obj2.zmonth7 = isdata ? data['monthPlanNum'+_that.zmonthArray[6]] : '';
			                obj2.zmonth8 = isdata ? data['monthPlanNum'+_that.zmonthArray[7]] : '';
			                obj2.zmonth9 = isdata ? data['monthPlanNum'+_that.zmonthArray[8]] : '';
			                obj2.zmonth10 = isdata ? data['monthPlanNum'+_that.zmonthArray[9]] : '';
			                obj2.zmonth11 = isdata ? data['monthPlanNum'+_that.zmonthArray[10]] : '';
			                obj2.zmonth12 = isdata ? data['monthPlanNum'+_that.zmonthArray[11]] : '';
			            }
			            arr.push(obj2)
			        }else if((year+1) == nyear){
			            obj1.ztype = '上年执行数';
			        }else{
			            obj1.ztype = '前年执行数';
			        }
			        obj1.zid = isdata ? data.id : '';
			        obj1.zsum = isdata ? data.yearPlanNum : '';
			        obj1.zquarterlysum = isdata ? data.yearSum : '';
			        if(this.periodCode == '38550'){
			            obj1.zquarterlySum1 = isdata ? data.quarterlySum1 : '';
			            obj1.zquarterlySum2 = isdata ? data.quarterlySum2 : '';
			            obj1.zquarterlySum3 = isdata ? data.quarterlySum3 : '';
			            obj1.zquarterlySum4 = isdata ? data.quarterlySum4 : '';
			        }else{
			            obj1.zmonth1 = isdata ? data['monthSum'+_that.zmonthArray[0]] : '';
			            obj1.zmonth2 = isdata ? data['monthSum'+_that.zmonthArray[1]] : '';
			            obj1.zmonth3 = isdata ? data['monthSum'+_that.zmonthArray[2]] : '';
			            obj1.zmonth4 = isdata ? data['monthSum'+_that.zmonthArray[3]] : '';
			            obj1.zmonth5 = isdata ? data['monthSum'+_that.zmonthArray[4]] : '';
			            obj1.zmonth6 = isdata ? data['monthSum'+_that.zmonthArray[5]] : '';
			            obj1.zmonth7 = isdata ? data['monthSum'+_that.zmonthArray[6]] : '';
			            obj1.zmonth8 = isdata ? data['monthSum'+_that.zmonthArray[7]] : '';
			            obj1.zmonth9 = isdata ? data['monthSum'+_that.zmonthArray[8]] : '';
			            obj1.zmonth10 = isdata ? data['monthSum'+_that.zmonthArray[9]] : '';
			            obj1.zmonth11 = isdata ? data['monthSum'+_that.zmonthArray[10]] : '';
			            obj1.zmonth12 = isdata ? data['monthSum'+_that.zmonthArray[11]] : '';
			        }
			        arr.push(obj1)
			        return arr
			    },
			periodHandle(){
				this.$refs.popup.open()
			},
			cancel(){
				this.$refs.popup.close()
			},
			save(){
				
				this.posId = this.searchPosId
				this.posName = this.searchPosName
				this.year = this.searchYear
				this.instId = this.searchInstId
				this.instName = this.searchInstName
				this.zUserId = this.searchUserId
				this.zUserName = this.searchUserName
				this.getCompanyTargetList()
				this.getInstTargetList()
				this.getPersonalTargetList()
				this.getPeriodObjListByCurrentYear()
				// this.periodCode = this.searchPeriodCode
				// this.periodName = this.searchPeriodName
				// this.quarterCode = this.searchQuarterCode
				// this.quarter = this.searchQuarter
				// this.month = this.searchMonth
				// this.monthCode = this.searchMonthCode
				this.getPeriodDate(1)
				this.showIndexListTotalNum = 0
				this.showIndexListNowNum = 1
				this.showIndexList = []
				this.indexList = []
				this.showPieChartList = []
				this.pieChartList = []
				this.getDataList()
				this.$refs.popup.close()
			},
			periodChange: function(e) {
				this.periodIndex = e.detail.value
				this.searchPeriodCode = this.periodCodeList[this.periodIndex].code
				this.searchPeriodName = this.periodCodeList[this.periodIndex].dicname
				this.quarterIndex = 0
				this.searchQuarterCode = '33057'
				this.searchQuarter = 1
				this.monthIndex = 0
				this.searchMonthCode = '35804'
				this.searchMonth = 1
				this.getPeriodDate()
			},
			yearChange: function(e) {
				this.yearIndex = e.detail.value
				this.searchYear = this.yearList[this.yearIndex].value
				this.getPeriodDate()
			},
			quarterChange: function(e) {
				this.quarterIndex = e.detail.value
				this.searchQuarterCode = this.quarterList[this.quarterIndex].code
				this.searchQuarter = this.quarterList[this.quarterIndex].dicname
				this.getPeriodDate()
			},
			monthChange: function(e) {
				this.monthIndex = e.detail.value
				this.searchMonth = this.monthList[this.monthIndex].referNum
				this.searchMonthCode = this.monthList[this.monthIndex].code
				this.getPeriodDate()
			},
			showInstTree(){
				this.showInstName = true
				this.$refs.ottree._show();
			},
			instCancel(){
				this.showInstName = false
			},
			instConfirm(selectList){
				let _that = this;
				if(selectList.length>0){
					_that.searchInstId = selectList[0].id
					_that.searchInstName = selectList[0].text
					_that.om.request('orgInstPosUserOfficeView/findUserlistByRequest',{
						instId: _that.searchInstId,
					},'post').then(res => {
						_that.searchUserId = res.value[0].id
						_that.searchUserName = res.value[0].username
						_that.searchInstId = res.value[0].posInfos[0].instId
						_that.searchInstName = res.value[0].posInfos[0].instName
						_that.searchPosId = res.value[0].posInfos[0].posId
						_that.searchPosName = res.value[0].posInfos[0].posName
					})
				}else{
					_that.searchInstId = ''
					_that.searchInstName = ''
				}
				_that.showInstName = false
			},
			extractTree(arrs,childs,attrArr){
				let attrList = [];
				if(!Array.isArray(arrs)&&!arrs.length)return [];
				if(typeof childs !== 'string')return [];
				if(!Array.isArray(attrArr)||Array.isArray(attrArr)&&!attrArr.length) {
					attrList = Object.keys(arrs[0]);
					attrList.splice(attrList.indexOf(childs), 1);
				}else{
					attrList = attrArr;
				}
				let list = [];
				const getObj = (arr)=>{
					arr.forEach(function(row){
						let obj = {};
						attrList.forEach(item=>{
							obj[item] = row[item];
						});
						list.push(obj);
						if(row[childs]){
							getObj(row[childs]);
						}
					})
					return list;
				}
				return getObj(arrs);
			},
			arrayToTree(data) {
			  let result;
			  let map = {};
			  data.forEach(item => {
			      map[item.id] = item;
			  });
			  data.forEach(item => {
			      let parent = map[item.parentid];
			      if (parent) {
			        (parent.children || (parent.children = [])).push(item);
			      } else {
			          result = item;
			      }
			  });
			  return result;
			},
			instCheckedItem(list,id){
				let _that = this
				for(let item of list){
					if(item.id == id){
						item.checked = true
					}else{
						item.checked = false
					}
					if(item.children && item.children.length){
						_that.instCheckedItem(item.children,id)
					}
				}
				return
			},
			confirmKey(e){
				let _that = this
				if (e.value) {
				  if (!_that.keyword || (_that.keyword && _that.keyword != e.value.trim())) {
					_that.keyword = e.value.trim()
					_that.searchListHandle()
				  }
				} else {
				  _that.keyword = ''
				  _that.searchListHandle()
				}
			},
			searchListHandle(){
				let _that = this;
				_that.om.request('orgInstPosUserOfficeView/findUserlistByRequest',{
					instId: _that.searchInstId,
					searchName: _that.keyword,
				},'post').then(res => {
					_that.searchList = res.value
				})
			},
			showUserNameHandle(){
				this.showUserName = true
				this.searchListHandle()
			},
			infoTab(item,index){
				this.searchUserId = item.id
				this.searchUserName = item.username
				this.searchInstId = item.posInfos[0].instId
				this.searchInstName = item.posInfos[0].instName
				this.searchPosId = item.posInfos[0].posId
				this.searchPosName = item.posInfos[0].posName
				this.showUserName = false
			},
			backHandle(){
				this.showUserName = false
			}
		},
		onLoad(data) {
			let _that = this;
			
			uni.setNavigationBarTitle({
				title: '管理驾驶舱'
			});
			
			_that.year = new Date().getFullYear(); 
			_that.searchYear = new Date().getFullYear(); 
			_that.instId = _that.salaryInstId;
			_that.instName = _that.salaryInstName;
			_that.searchInstId = _that.salaryInstId;
			_that.searchInstName = _that.salaryInstName;
			_that.zUserId = _that.userId;
			_that.zUserName = _that.userName;
			_that.searchUserId = _that.userId;
			_that.searchUserName = _that.userName;
			_that.posId = _that.salaryPosId;
			_that.posName = _that.salaryPosName;
			_that.searchPosId = _that.salaryPosId;
			_that.searchPosName = _that.salaryPosName;
			
			let arr = [
				_that.om.request("orgCulture/getLastData",{
					ignoreVerify: false,
				}),
				_that.om.request("dictZero/getListByCode",{
					code: 38548
				}),
				_that.om.request("annualReportPeriod/getYearList"),
				_that.om.request("dictZero/getListByCode",{
					code: 33055
				}),
				_that.om.request("dictZero/getListByCode",{
					code: 35803
				}),
				_that.om.request("tinstitution/getComboTree"),
			]
			//多个AJAX全部完成时开始执行
			Promise.all(arr).then(res => {
				_that.mission = res[0].value.mission
				_that.vision = res[0].value.vision
				_that.valuesList = res[0].value.dataList
				_that.missionDetail = res[0].value.missionExplain
				_that.visionDetail = res[0].value.visionExplain 
				
				// _that.periodCodeList = res[1]
				_that.yearList = res[2]
				// _that.quarterList = res[3]
				// _that.monthList = res[4]
				
				// for(let i=0;i<_that.periodCodeList.length;i++){
				// 	if(_that.periodCodeList[i].code == '38551'){
				// 		_that.periodIndex = i
				// 	}
				// }
				
				for(let i=0;i<_that.yearList.length;i++){
					if(_that.yearList[i].value == _that.searchYear){
						_that.yearIndex = i
					}
				}
				
				let arr = _that._.cloneDeep(res[5])
				_that.instCheckedItem(arr,_that.searchInstId)
				_that.instList = arr
				
				_that.getPeriodDate(1)
				_that.getCompanyTargetList()
				_that.getInstTargetList()
				_that.getPersonalTargetList()
				_that.getPeriodObjListByCurrentYear()
				_that.getDataList()
			})
			
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if(_that.showIndexListTotalNum > _that.showIndexListNowNum){
				_that.showIndexListNowNum++
				let indexListArr = _that.indexList.slice(10*(_that.showIndexListNowNum-1), 10*_that.showIndexListNowNum)
				let pieChartListArr = _that.pieChartList.slice(10*(_that.showIndexListNowNum-1), 10*_that.showIndexListNowNum)
				_that.showIndexList.push(...indexListArr)
				_that.showPieChartList.push(...pieChartListArr)
			}
		}
	};
</script>

<style>
	.desc-chart{
		position: fixed;
		top: 0;
		/* line-height: 50px;
		padding: 0 15px; */
		font-size: 14px;
		border-bottom: #EEEEEE 1px solid;
		/* display: flex; */
		z-index: 99;
		width: 100%;
	}
	.allchart{
		width: 100%;
	}
	.allchart a{
		float: right;
		display: block;
		width: 68px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		display: block;
		color: #000;
		background-color: #fff;
		margin: 12px 15px 12px 4px;
	}
	.title-Icon{
		width: 6px;
		height: 18px;
		border-radius: 3px;
		margin-left: 11px;
		background-color: #39B54A;
	}
	.look{
		width: 20px;
		height: 20px;
		margin-left: 5px;
	}
	.indexshow{
		/* height: 30px; */
		overflow: hidden;
	}
	.swiper-item{
		/* float: left;
		width: 35%;
		margin: 10px 0 0 10%;
		height: 32px;
		line-height: 32px;
		border: 1px solid #dedede;
		border-radius: 3px;
		padding: 0 2%;
		overflow: hidden;
		white-space: nowrap; 
		text-overflow: ellipsis; */
		margin-left: 24px;
	}
	.swiper-item.active{
		/* background-color: #5697F4;
		color: #FFF; */
	}
	.chart{
		margin-left: 24px;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		/* text-align: center; */
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		text-align: left;
	}
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-tip{
		font-size: 16px;
		color:#b0b0b0 ;
	}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
	.popup-text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 80px;
	}
	.popup-select{
		border: 0;
		width: 150px;
		height: 19px;
		line-height: 19px;
		background: none;
		appearance: none;
		text-align: right;
		text-align-last: right;
		font-size: 16px;
	}
	.popup-input{
		text-align: right;
	}
	.showUserPopup{
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		z-index: 9998;
		background: #FFF;
		height: 100%;
	}
	
	.showUserPopup .bar{
		background-color: #fff;
		height: 36px;
		padding-left: 10px;
		padding-right: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom-width: 0.5px !important;
		border-bottom-style: solid;
		border-bottom-color: #f5f5f5;
		font-size: 16px;
		color: #757575;
		line-height: 1;
	}
</style>                                                  
